<template>
  <div class="article">
    <div class="search_cpm">
      <page-search :search-form-config="searchFormConfig" :associateModel="associateModel"
        @searchBtnClick="handleSearch" @resetBtnClick="handleReset" ref='mySearchRef'>
      </page-search>
    </div>
    <div class="table_cpm">
      <page-table ref="myTableRef" pageName="article" :table-config="tableConfig" @createOrEdit="handleCreateOrEdit"
        @exportData="handleExportData" @importData="handleImportData">
        <template #cover="{ row }">
          <el-image lazy class="avatar" :src="row.cover" :preview-src-list="[row.cover]" :initial-index="0"
            fit="cover" />
        </template>
        <template #categories="{ row }">
         <div v-if="!isEmptyArr(row.categories)">
          <template v-for="category in row.categories" size="small" :key="category.id">
            <el-tag :type="categoryMap.get(category.identification)?categoryMap.get(category.identification):'info'" class="tag">
              {{ category.name }}
            </el-tag>
          </template>
          </div>
        </template>
        <template #uploadAvatar="{ row }">
          <el-button type="text" icon="el-icon-edit" size="mini" v-if="usePermission('user', 'update')"
            @click="handleUpload(row)">
            封面</el-button>
        </template>

      </page-table>
    </div>
    <div class="modal_cpm">
      <page-modal :modal-form-config="modalFormConfigRef" :default-info='defaultInfo' page-name="article"
        ref='pageModalRef'></page-modal>
    </div>
    <export-data ref="exportDataRef" :dataList="dataList" :excel-config="ARTICLE_EXPORT"></export-data>
    <import-data ref="importDataRef" :excelConfig="ARTICLE_IMPORT" @onSuccess="handleOnSuccess"></import-data>
    <page-upload  ref="pageUploadRef"   :uploadUrl="uploadUrl" :token="token" @uploadSuccess="handleUploadSuccess"></page-upload>

  </div>
</template>
<script setup lang='ts' >
import { computed, ref } from "vue"
import { searchFormConfig } from "./config/search.config"
import { tableConfig } from "./config/table.config"
import { modalFormConfig } from "./config/modal.config"
import { ARTICLE_IMPORT, ARTICLE_EXPORT } from "./config/export.config"
import { usePageSearch, usePageModal, useExport, usePermission } from "@/hooks"
import { ElMessageBox } from 'element-plus'
import PageUpload from "@/components/page-upload"
import { useStore } from "@/store"
const store = useStore()
let [handleSearch, handleReset, myTableRef, mySearchRef] = usePageSearch()
const pageUploadRef = ref<InstanceType <typeof PageUpload>>()


const associateIds = modalFormConfig.formItems.find(item => item.field === 'associateIds')
const associateModal = searchFormConfig.formItems.find(item => item.field === 'associateModal')

const modalFormConfigRef = computed(() => {
  const entireCategorys = store.state.entireCategorys
  associateIds!.options = entireCategorys.map(item => {
    return {
      value: item.id,
      title: item.name
    }
  })
  associateModal!.options = entireCategorys.map(item => {
    return {
      value: item.identification,
      title: item.name
    }
  })
  return modalFormConfig
})

const callbackEdit = () => {

  pageModalRef.value.dialogTitle = '修改文章信息'
}
const callbackCreated = () => {

  pageModalRef.value.dialogTitle = '添加文章信息'
}
// 配置显示角色的映射关系
const categoryMap = new Map<string, string>([['Life','info'],["Technology", "primary"],['Project','success']])
// 定义查询关联数据模型
let associateModel = {}
const initAssociateModel = () => {
  for (const item of searchFormConfig.formItems) {
    if (item['isAssociate']) {
      associateModel = {
        associateKey: item.associateKey,
      }
    }
  }
}
initAssociateModel()
let [handleCreateOrEdit, defaultInfo, pageModalRef] = usePageModal(callbackEdit, callbackCreated)


let { handleExportData,
  exportDataRef,
  dataList,
  importDataRef,
  handleImportData, handleOnSuccess } = useExport('article', store)


const showUpload = ref(false)
const uploadUrl = ref('')
const token = computed(()=>store.state.login.token['token'])
const handleUpload = (row: any) => {
  pageUploadRef.value!.showUpload = true

  uploadUrl.value = `/api/file/createArticleCover/${row.id}`

}
const handleUploadSuccess = () => {
   pageUploadRef.value!.showUpload = false
  if (usePermission('article', 'query', store)) {
    store.dispatch('article/articleListAction')
  }

}

const isEmptyArr = (arr:any) => JSON.stringify(arr) === '{}'


</script>
<style lang='less' scoped>
.table_cpm {
  margin-top: 15px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.tag {
  margin: 2px;
}
</style>
